import './index.scss'
import * as echarts from 'echarts';
import { useEffect } from 'react'
//功能组件


//1 基本的样式


//业务功能

//1  我在工作中=》在一个页面中 如果相同的echart 需要展示多个  =》 动态属性 =》id  注意
// 2  width => 在使用决定他的width ,height 

// 3 名称是不同的 =》动态属性

// 4 处理 echarts  bar 图的一些属性 => 不用级 =》搜索

// 5： echarts 他的数据  =》 封装 父组件给数据


// 6: echarts 后端给的数据，echarts 组件创建完毕了，但是 数据还没有过来
// 问题=》 视图中没有数据 =》 监听的 数据（动态的数据）

// let dom: any = null
// let myChart:any 
interface propsObj {
    id: any,
    height?:any
    width: number,
    title?: string,
    from?:any  // true =》 是没有 x轴的
    barDatasObj: any  // 初始值  =》{}
}
function LineEcharts(props: propsObj) {


    useEffect(() => {
        //  => 写一个方法 =》 对echart 进行创建
        createEcharts()
        console.log('echarts组件创建 和 echarts 监听到 后端给的数据', props.barDatasObj);

    }, [props.barDatasObj])

    
    //自己定义方法 =》判断这个 折线数据是什么值=》 没有x轴 数据

    
    const createEcharts = () => {
      
          let  dom:any = document.getElementById(props.id)
           let myChart = echarts.init(dom);
        
        
      
        

        //  配置项目  =》 echarts 配置属性 =》做好注释
        let option = {
            xAxis: { //x
                type: 'category',
                data: props.from?[]: props.barDatasObj.datax,
                show: props.from?false:true,
            },
            yAxis: {  //y
                type: 'value',
                show: props.from?false:true,
            },
            series: [  //数据数据 props.from?[]:props.barDatasObj,
           
                {
                    data: props.from?props.barDatasObj:props.barDatasObj.datay,
                    type: 'line',
                    // showBackground: true,
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: "#1afa29" // 0% 处的颜色
                            }, {
                                offset: 1, color: '#fff' // 100% 处的颜色
                            }],
                            global: false
                        }
                    },
 
                    barWidth: 5,
                    itemStyle : {  
                        normal : {  
                            color:'#1afa29'  
                        }  
                    },  
                 
                   
                       

                    // },  props.from?false:true,  
                    symbol: props.from?"":"none"
                },
               
            ]
        };

        myChart.setOption(option)
    }
    return (  // props.width
        <div className="lineEcharts" style={{ width: props.width + "%" }}>

            {/* 名称  // props.height?props.height:300 */}
             
            <h4>{props.title}</h4>
            <div id={props.id} style={{ height:props.height?props.height:300 + 'px', width:100+ "%" }}></div>
        </div>
    )
}




// 总结=》 二次封装 echart 

//
export default LineEcharts